<template>
	<div class="movie">
		<div class="most-expected">
			<p>近期最受期待</p>
			<div class="most-expected-list">
				<div class="expected-item" v-for="(item,index) in expected" :key="index">
					<div class="poster">
						<img :src="_repic(item.img)" alt="">
					</div>
					<h5>{{item.nm}}</h5>
					<p class="data">{{_comingTitle(item.comingTitle)}}</p>
				</div>
			</div>
		</div>
		<div class="partition-line"></div>
		<div v-for="(ele,index) in comingList" :key="index">
			<p class="time">{{ele.comingTitle}}</p>
			<div class="list-wrap" v-for="(item,index) in ele.items" :key="index">
				<div class="list">
					<div class="poster">
						<img :src="_repic(item.img)">
					</div>
					<div class="info">
						<div class="content">
							<div class="movie-title">
								<p class="name">{{item.nm}}</p>
							</div>
							<div class="detail">
								<p class="score"><span class="num">{{item.wish}}</span> 人想看</p>
								<p class="actor">主演: {{item.star}}</p>
								<p class="show-info">{{item.rt}}上映</p>
							</div>
						</div>
						<div class="btn toggle-wish-btn" v-show="!item.showInfo">想看</div>
						<div class="btn" v-show="item.showInfo" :style="btnStyle">预售</div>
					</div>
				</div>
			</div>
		</div>
		<div class="more"></div>
	</div>
</template>

<script>
import api from '../config/api.js';

export default {
	data(){
		return {
			expected:'',
			comingList:{},
			offset: 0,
			limit: 10,
			page:0,
			btnStyle: {
				background: "#3c9fe6"
			}
		}
	},
	methods:{
		_comingTitle(str){
			return str.slice(0,-3);
		},
		_repic(img){
			return img.replace(/w.h/,'64.90');
		},
		//获取期待电影列表
		_getExpected(){
			var expected = localStorage.getItem('expected');
			if(expected){
				this.expected = JSON.parse(expected).coming;
			}else{
				this.$axios({
					url: api.mostExpected,
					params:{
						ci:20,
						limit:this.limit,
						offset:this.offset,
						token:''
					}
				}).then(res=>{
					localStorage.setItem('expected',JSON.stringify(res.data));
					this.expected = res.data.coming;
				})
			}
		},
		//获取更多期待电影列表
		_getMostExpected(){
			var mostExpected = document.querySelector('.most-expected-list');
			var scrollWidth,scrollLeft,clientWidth,difference
			mostExpected.addEventListener('scroll',(e)=>{
				scrollWidth = e.target.scrollWidth;
				scrollLeft = e.target.scrollLeft;
				clientWidth = e.target.clientWidth;
				difference = scrollWidth - scrollLeft === clientWidth;
				
				if(difference){
					this.offset += this.limit;
					
					this.$axios({
						url: api.mostExpected,
						params:{
							ci:20,
							limit:this.limit,
							offset:this.offset,
							token:''
						}
					}).then(res=>{
						this.expected.push(...res.data.coming);
					})
				}
			})
		},
		//获取即将上映电影
		_getComingList(){
			return new Promise((resolve,reject)=>{
				this.$axios({
					url: api.comingList,
					params:{
						ci:20,
						token:'',
						limit:10
					}
				}).then((res)=>{
					resolve(res.data.coming);
					localStorage.setItem('comingList',JSON.stringify(res.data));
				})
			})
		},
		//获取更多即将上映电影
		_getMoreComingList(){
			var movie = document.querySelector('.movie');
			
			movie.addEventListener('scroll',(e)=>{
				var scrollHeight = e.target.scrollHeight;
				var scrollTop = e.target.scrollTop;
				var clientHeight = e.target.clientHeight;
				var d = scrollHeight - scrollTop === clientHeight;
				
				//判断是否到底部
				if(d){
					var coming = JSON.parse(localStorage.getItem('comingList'));
					var arr = coming.movieIds.slice(this.page+=10,this.page+10);
					var movieIds = arr.join(',');
					
					this.$axios({
						url: api.moreComingList,
						params:{
							token:'',
							movieIds:movieIds
						}
					}).then((res)=>{
						this._serializeComing(res.data.coming);
					})
				}
			})
		},
		//自定义comingList数据结构
		_serializeComing(coming){
			coming.forEach((ele)=>{
				if(!this.comingList[ele.comingTitle]){
					var obj = {};
					this.comingList[ele.comingTitle] = obj;
					obj.comingTitle = ele.comingTitle;
					obj.items = [];
					obj.items.push(ele)
				}else{
					this.comingList[ele.comingTitle].items.push(ele);
				}
			})
			this.comingList = Object.assign({},this.comingList);
		}
	},
	created() {
		this._getExpected();
		this._getComingList().then((res)=>{
			this._serializeComing(res);
		});
	},
	mounted() {
		this._getMostExpected();
		this._getMoreComingList();
	}
}
</script>

<style lang="scss" scoped>
.movie{
	width: 100%;
	height: calc(100% - 98px);
	position: absolute;
	overflow: auto;
}
.most-expected{
	width: 100%;
	padding: 12px 15px;
	background-color: #fff;
	>p{
		font-size: 14px;
		color: #333;
		margin-bottom: 12px;
	}
	.most-expected-list{
		overflow: scroll;
		white-space: nowrap;
	}
	.most-expected-list::-webkit-scrollbar{
		display: none;
	}
}
.expected-item{
	display: inline-block;
	width: 85px;
	margin-right: 10px;
	overflow: hidden;
	.poster{
		width: 85px;
		height: 115px;
		margin-bottom: 6px;
		background-color: #f5f5f5;
		img{
			display: block;
			width: 100%;
			height: 100%;
		}
	}
	h5{
		font-size: 13px;
		color: #222;
		margin-bottom: 3px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.data{
		font-size: 12px;
		color: #999;
	}
}
.partition-line{
	height: 10px;
	background-color: #f5f5f5;
}
.time{
	font-size: 14px;
	color: #333;
	padding: 12px 15px 0;
}
.list-wrap{
	width: 100%;
	padding: 0 15px;
	overflow: hidden;
	.poster{
		width: 64px;
		height: 90px;
		margin-top: 12px;
		margin-right: 10px;
		float: left;
		background-color: #E5E5E5;
		img{
			width: 100%;
			height: 100%;
		}
	}
	.info{
		width: calc(100% - 79px);
		padding: 12px 14px 12px 0;
		border-bottom: 1px solid #e6e6e6;
		position: relative;
		float: left;
		.content{
			margin-right: 47px;
			padding-right: 5px;
			p{
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.movie-title{
				font-size: 17px;
				color: #333;
				font-weight: 700;
				margin-bottom: 7px;
			}
			.detail{
				font-size: 13px;
				color: #666;
				.score{
					.num{
						font-size: 15px;
						color: #faaf00;
					}
				}
				.actor{
					margin-top: 6px;
				}
				.show-info{
					margin-top: 6px;
				}
			}
		}
		.btn{
			position: absolute;
			top: 0;
			right: 14px;
			bottom: 0;
			margin: auto;
			width: 47px;
			height: 27px;
			text-align: center;
			line-height: 27px;
			font-size: 12px;
			color: #fff;
			border-radius: 4px;
		}
		.toggle-wish-btn{
			background-color: #faaf00;
		}
	}
}
.more{
	height: 48px;
}
</style>
